<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script src="jquery.min.js"></script>
    <script type="text/javascript">

        $(function () {
            //页面加载完成后执行的函数
            console.log("ready");
        });

        function func_post() {
            console.log("post");
            $.post("/post", function (data) {
                alert(data);

                $("#post").append(data)
            });
        }

        function func_home() {
            console.log("home");
            $.get("/home", function (data) {
                alert(data);

                $("#home").append(data)
            });
        }

        function func_ajax() {
            console.log("ajax");

            // ajax 传统写法
            // var text = $.ajax({
            //     url:"/json",
            //     type:"POST",
            //     dataType: "json",
            //     data:null,
            //     success:function(data){
            //
            //         // 使用ajax函数有区别于get/post函数
            //         // 这里返回的data就是个json格式object
            //         // 其所有的属性如果是json格式都是object
            //         // 只有属性是不是json格式才是文本才能显示
            //         // ajax的返回值text与data是一样的
            //
            //         alert(data.data);
            //         $("#ajax").append(data.code)
            //     },
            //     error:function(){
            //         $("#ajax").append("error");
            //     }
            // });
            // alert(text);



            // json 新写法 jquery>1.5.0
            // $.ajax({
            //     url:"json",
            //     type:"POST",
            //     dataType: "json",
            //     data:null
            // }).done(function(data){
            //     $("#ajax").append(data.code)
            // }).fail(function(){
            //     $("#ajax").append("error");
            // });


            // jsonp 解决ajax不能跨域问题
            // jquery对于其封装成跟ajax一样
            $.ajax({
                url:"http://localhost:8899/jsonp",
                type:"POST",
                dataType: "jsonp",
                jsonp:"jsonp"
            }).done(function(data){
                $("#ajax").append(data.code)
            }).fail(function(){
                $("#ajax").append("error");
            });

            //注意后台程序要接收网址上的jsonp参数
            //返回的数据json要使用jsonp()格式

            // 后台修改的接口也只能使用jsonp去访问
            $.ajax({
                url:"/jsonp",
                type:"POST",
                dataType: "jsonp",
                jsonp:"jsonp"
            }).done(function(data){
                alert(data.code)
            }).fail(function(){
                $("#ajax").append("error");
            });

        }

    </script>
</head>
<body>

<input type="button" id="btn_home" value="home" onclick="func_home();">
<div id="home">home：</div>

<input type="button" id="btn_post" value="post" onclick="func_post();">
<div id="post">post：</div>

<input type="button" id="btn_ajax" value="ajax" onclick="func_ajax();">
<div id="ajax">ajax：</div>

</body>
</html>